<template>
    <view class="deliveBox">
        <view class="dtab">
            <view class="box" :class="ctype ? 'active' : ''" @click="ckTypefc">外送</view>
            <view class="c9">|</view>
            <view class="box" :class="ctype ? '' : 'active'" @click="ckTypefc">自提</view>
        </view>
        <!-- 收货地址 -->

        <!-- 外送 -->
        <view class="address" @click="topage('/pages/shop/address')">
            <view class="adMsg" v-if="ctype">
                <view v-if="address._id">
                    <view class="fwb">收货地址</view>
                    <view class="ad">{{ address.address }}{{ address.addressMsg }}</view>
                    <view class="fs28">{{ address.name }} {{ address.phone }}</view>
                </view>
                <view v-else class="noneAd">
                    <u-icon name="plus" size="25"></u-icon>
                    <text class="mgl20">请添加地址</text>
                </view>
            </view>
            <!-- 自提 -->
            <view class="adMsg fwb" v-else>自提</view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
defineProps({
    address: {
        type: Object,
        default: {}
    }
});
const emits = defineEmits(['buyModel']);
const ctype = ref(true);
const ckTypefc = () => {
    ctype.value = !ctype.value;
    emits('buyModel', ctype.value);
};

const topage = (url) => {
    console.log(url);
    uni.navigateTo({
        url
    });
};
</script>

<style lang="scss" scoped>
.deliveBox {
    .dtab {
        @include flex-box();
        padding: 30rpx;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10rpx;

        .box {
            flex: 1;
            text-align: center;

            &.active {
                color: $uni-color-error;
            }
        }
    }

    .address {
        padding: 20rpx;
        box-sizing: border-box;
        background-color: #fff;

        .adMsg {
            height: 100%;
            background-color: #f8f8f8;
            padding: 20rpx;
            box-sizing: border-box;

            .ad {
                @include ellipsis(2);
            }

            .noneAd {
                font-size: $uni-font-size-lg;
                @include flex-box-set();
            }
        }
    }
}
</style>
